import { ConfigProvider as SemiConfigProvider } from "@douyinfe/semi-ui";
import { ConfigProvider, Modal, Drawer } from "antd";
import { useModel, Outlet } from "umi";
import { useEffect } from "react";
import dayjs from "dayjs";
import zhCN from "antd/es/locale/zh_CN";
import zh_CN from "@douyinfe/semi-ui/lib/es/locale/source/zh_CN";
import "dayjs/locale/zh-cn";

import useRemoteApplication from "../hooks/application/useRemoteApplication.js";
// import useRemoteApplicationAuthorization from "../hooks/application/useRemoteApplicationAuthorization.js";

import MainPageLayout from "./main";

dayjs.locale("zh-cn");

const MainLayout = () => {
    const { modalVisible, modalTitle, modalWidth, modalComponent, modalStyle, onCloseGlobalModal } = useModel("global.modal");
    const { drawerVisible, drawerTitle, drawerWidth, drawerHeight, drawerComponent, drawerPlacement, drawerFooter, drawerClosable } = useModel("global.drawer");
    const { onCloseGlobaldrawer, drawerMask, drawerMaskClosable } = useModel("global.drawer");
    const { setApplicationStateValue } = useModel("application.info");

    const { remoteApplication } = useRemoteApplication();
    // const { loadRemoteApplicationAuthorization } = useRemoteApplicationAuthorization();

    // const loadData = async () => {
    //     let remoteApplication = await loadRemoteApplication(applicationUuid);
    //     setApplicationStateValue({ remoteApplication });
    //     let remoteApplicationAuthorization = await loadRemoteApplicationAuthorization(applicationUuid);
    //     if (remoteApplicationAuthorization) {
    //         setApplicationStateValue({
    //             ...remoteApplicationAuthorization,
    //             isAuth: remoteApplicationAuthorization.isExpire === false && remoteApplicationAuthorization.isStop === false,
    //         });
    //     }
    // };

    useEffect(() => {
        remoteApplication?.appUuid && setApplicationStateValue({ remoteApplication });
    }, [remoteApplication]);

    let LayoutComponent = MainPageLayout;

    return (
        <ConfigProvider locale={zhCN}>
            <SemiConfigProvider locale={zh_CN}>
                <LayoutComponent>
                    <Outlet />
                </LayoutComponent>
                <Drawer
                    title={drawerTitle}
                    placement={drawerPlacement}
                    height={drawerHeight}
                    width={drawerWidth}
                    closable={drawerClosable}
                    destroyOnClose={true}
                    onClose={onCloseGlobaldrawer}
                    open={drawerVisible}
                    getContainer={() => document.getElementById("main-body")}
                    mask={drawerMask}
                    maskClosable={drawerMaskClosable}
                    rootStyle={{ position: "absolute", top: 32 }}
                    footer={drawerFooter}
                >
                    {drawerComponent || ""}
                </Drawer>
                <Modal
                    title={modalTitle}
                    closable={modalTitle !== null}
                    destroyOnClose={true}
                    centered={!modalStyle}
                    style={modalStyle}
                    maskClosable={false}
                    footer={null}
                    open={modalVisible}
                    width={modalWidth}
                    okText="确认"
                    cancelText="取消"
                    onCancel={onCloseGlobalModal}
                >
                    {modalComponent || ""}
                </Modal>
            </SemiConfigProvider>
        </ConfigProvider>
    );
};

export default MainLayout;
